<template>
    <div class="player">
        <div class="song-info"></div>
        <div class="song-pic">
            <img :src="singer.cover" alt="">
        </div>
        <div class="song-control">
            <audio src="songUrl" controls autoplay></audio>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            songUrl:"",
            singer:{}
        }
    },
    created(){
       this.getData();
       this.getStoreSinger()
    },
    methods:{
        getData(){
            axios.get("/jsososo/song/urls",{
                params:{
                    id:this.$route.params.id
                }
            })
            .then(res =>{
                this.songUrl=res.data.data[this.$route.params.id]
            })
            .catch(err =>{
                console.error(err)
            })
        },
        getStoreSinger(){
            console.log(this.$store.getters.singer);
            
            if(this.$store.getters.singer !=null){
                this.singer=this.$store.getters.singer;
                sessionStorage.setItem("song",JSON.stringify(this.$store.getters.singer));
            }else{
                this.singer=JSON.parse(sessionStorage.getItem("song"));
            }
        }
    }
}
</script>
<style scoped>
  
</style>